<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%- include ../taglibs/layout_head.ejs%>
    <%- include ../taglibs/layout.css.ejs%>
    <link rel="stylesheet" type="text/css" href="css/monitor/monitor.css">
    <style type="text/css">
        body, html,#mymap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        @keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        @-moz-keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        @-o-keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        @-webkit-keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        .arrowLeft{
            position: absolute;
            right: 0;
            top:50%;
            font-size: 32px;
            cursor: pointer;
            animation: doggeAnation 3s infinite;
            -webkit-animation: doggeAnation 3s infinite ;
            -moz-animation:doggeAnation 3s infinite ;
            -o-animation: doggeAnation 3s infinite;
            z-index:10011
        }
        .arrowRight{
            position: absolute;
            left: 3px;
            top:50%;
            font-size: 32px;
            cursor: pointer;
            animation: doggeAnation 3s infinite;
            -webkit-animation: doggeAnation 3s infinite ;
            -moz-animation:doggeAnation 3s infinite ;
            -o-animation: doggeAnation 3s infinite;
            z-index:1009;
            display: none;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5pOe9cqol0NaNdEbtvTXMC9h"></script>
</head>
<body>
<div class="monitor-box">
        <div class="monitor-box-head">
            <ul id="head-Tab">
                <li tabCode = "1">
                    <img src="images/page3/超速_u1088.png">
                    <span class="text">
                        超速
                    </span>
                </li>
                <li tabCode = "3">
                    <img src="images/page3/行驶_u1092.png">
                    <span class="text">
                        行驶
                    </span>
                </li>
                <li tabCode = "0">
                    <img src="images/page3/停车_u1089.png">
                    <span class="text">
                        停车
                    </span>
                </li>
                <li tabCode = "2">
                    <img src="images/page3/离线_u1091.png">
                    <span class="text">
                    离线
                </span>
                </li>
            </ul>
        </div>
        <div class="guanzhu" id="guanzhu">
            <img id="u1291_img" class="img " src="images/page3/u1291.png" tabindex="0" style="outline: none;">
            <img id="u1292_img" class="img " src="images/page3/u1292.png">
        </div>
        <div class="font-default guanzhu-box" id="guanzhu-box-content">
            <ul class="menu-box">
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1268_img" class="img " src="images/page3/u1268.png">
                        </span>
                        单次点名
                    </a>
                </li>
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1280_img" class="img " src="images/page3/u1280.png">
                        </span>
                        锁车
                    </a>
                </li>
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1283_img" class="img " src="images/page3/u1283.png">
                        </span>
                        解锁
                    </a>
                </li>
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1271_img" class="img " src="images/page3/u1271.png">
                        </span>
                        区域查车
                    </a>
                </li>
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1274_img" class="img " src="images/page3/u1274.png">
                        </span>
                        解除报警
                    </a>
                </li>
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1277_img" class="img " src="images/page3/u1277.png">
                        </span>
                        测距
                    </a>
                </li>
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1286_img" class="img " src="images/page3/u1286.png">
                        </span>
                        标注设定
                    </a>
                </li>
                <li>
                    <a id="guanzhu-btn">
                        <span class="box-img">
                            <img id="u1289_img" class="img " src="images/page3/u1289.png">
                        </span>
                        关注
                    </a>
                </li>
            </ul>
        </div>
        <div id="myMapParent" style="position: relative;display: block;width: 100%">
            <div id="mymap">

            </div>
        </div>
        <!--<i class="fa fa-angle-double-right arrowRight"-->
           <!--aria-hidden="true"-->
        <!--&gt;</i>-->
        <div class="left-tree-arrow" id="left-tree-arrow">
            <img src="images/page3/u1245.png">
        </div>
        <div class="left-tree" id="left-tree">
            <div class="left-head">
                <div class="left-head-tab">
                    <div>
                        <span>
                            全部(<span id="allCar">0</span>)
                        </span>
                    </div>
                    <div id="onlineCar">
                        <span  style="color:#78af3a;cursor: pointer">
                        在线(<span id="onCar">0</span>)
                            </span>
                    </div>
                    <div id="unOnlineCar">
                         <span style="cursor: pointer">
                           离线(<span id="upCar">0</span>)
                            </span>
                    </div>
                </div>
                <!--<i id="bottom-arrow" class="fa fa-chevron-left"-->
                   <!--style="color: #6dcff6;-->
                            <!--cursor: pointer;-->
                            <!--position: absolute;-->
                            <!--top: 5px;-->
                            <!--right: 2px;font-size: 18px"></i>-->
            </div>
            <div class="left-search">
                <input type="text" class="form-control" id="deviceInfo" placeholder="请输入设备进行查询">
                <span class="search-img" id="search-icon">
                    <img src="images/page3/u1242.png" class="img">
                </span>
            </div>
            <div id="treeview" >
            </div>
            <div class="left-tree-bottom-arrow" id="bottom-arrow">
                <img src="images/page3/左上角_u1239.png">
            </div>
            <!--<i class="fa fa-angle-double-left arrowLeft" aria-hidden="true"></i>-->
        </div>
        <ul class="rightkey-box" id="rightkey-box">
                <li>
                    重启设备
                </li>
                <li>
                    锁车
                </li>
                <li>
                    解锁
                </li>
                <li>
                    查询版本
                </li>
                <li>
                    回传时间
                </li>
                <li>
                    超速报警设置
                </li>
                <li>
                    里程设置
                </li>
                <li>
                    远程升级
                </li>
                <li>
                    停车超时设置
                </li>
                <li>
                    疲劳驾驶设置
                </li>
                <li class="hover-box">
                    原地设防
                    <img
                            id="u1147_img"
                            class="img "
                         style="border-width: 0px;
                         width: 20px;
                         height: 20px;
                        float: right;
                         margin-top: 5px;" src="images/page3/右箭头_u1147.png">
                    <ul id="hover-box-ul">
                       <li>
                            <span>
                                设防
                            </span>
                       </li>
                       <li>
                          <span>
                             撤防
                          </span>
                       </li>
                    </ul>
                </li>
                <li>
                    道路行驶参数设置
                </li>
                <li>
                    透传下发
                </li>
            </ul>
        <div class="bottom-box-arrow" id="bottom-box-arrow">
            <img src="images/page3/左上角_u1239.png">
        </div>
        <div class="bottom-box" id="bottom-box">
            <div class="bottom-top-arrow" id="bottom-top-arrow">
                <img src="images/page3/u1245.png">
            </div>
            <div class="bottom-header">
                <p>
                    所有车辆
                </p>
            </div>
            <div class="bottom-table">
                <table id="carInfoTable"></table>
            </div>
        </div>


        <div class="monitor-dialog" id="onlineDialog" style="display: none">
            <div class="monitor-dialog-head">
                <span >
                        在线车辆（<span>0</span>）
                </span>
                <span class="button-box">
                    导出
                </span>
                <button type="button" id="onlineClose" class="closebtn head-btn-close" data-dismiss="modal" aria-hidden="true"></button>
            </div>
            <div class="monitor-dialog-body">
                <div class="monitor-dialog-content">
                    <table id="onlineCarInfoTable" style="height: 335px;max-height: 335px;overflow-y: auto"></table>
                </div>
            </div>
        </div>
    <div class="monitor-dialog outlineDialog" id="unonlineDialog" style="display: none">
        <div class="monitor-dialog-head">
                <span>
                        离线车辆（<span>0</span>）
                </span>
                <span class="button-box">
                    导出
                </span>
            <button type="button" id="unOnlineClose" class="closebtn head-btn-close" data-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="monitor-dialog-body">
            <div class="monitor-dialog-content">
                <table id="unOnlineCarInfoTable" style="height: 335px;max-height: 335px;overflow-y: auto"></table>
            </div>
        </div>
    </div>
    <div class="monitor-dialog" id="guanzhuDialog" style="display: none">
        <div class="monitor-dialog-head">
                <span>
                        关注
                </span>
            <button type="button" id="guanzhuClose" class="closebtn head-btn-close" data-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="monitor-dialog-body">
            <div class="monitor-dialog-content">
                <table id="guanzhuInfoTable" style="height: 335px;max-height: 335px;overflow-y: auto"></table>
            </div>
        </div>
    </div>
</div>
<div id="carInfoDialog" style="display: none">
    <form id="carInfoForm" class="form-horizontal form-validBox" >
        <input id="id" name="id" type="hidden">
        <input id="baseTerminalId" name="baseTerminalId" type="hidden">
        <input id="baseCarTypeId" name="baseCarTypeId" type="hidden">
        <input id="deptId" name="deptId" type="hidden">
        <div class="form-group">
            <label for="baseCarNo" class="col-sm-3 control-label label-require">车牌号：</label>
            <div class="col-sm-8">
                <input id="baseCarNo" name="baseCarNo" class="form-control"
                        type="text" aria-required="true"
                       aria-invalid="true" readonly="readonly">
            </div>
        </div>

        <div class="form-group">
            <label for="catCode" class="col-sm-3 control-label">车辆品牌：</label>

            <div class="col-sm-8">
                <input id="baseCarBrand" name="baseCarBrand"
                       class="form-control"
                       type="text" aria-required="true"
                       aria-invalid="true" readonly="readonly">
            </div>
        </div>
        <div class="form-group">
            <label for="baseCarTypeName" class="col-sm-3 control-label label-require">车辆类型：</label>
            <div class="col-sm-8">
                <input id="baseCarTypeName" name="baseCarTypeName"
                       class="form-control"
                        type="text"
                       aria-required="true" aria-invalid="true" readonly="readonly">
            </div>
        </div>

        <div class="form-group" id="isHiddenDiv">
            <label for="baseCarOutput" class="col-sm-3 control-label">排量：</label>
            <div class="col-sm-8">
                <input type="text" id="baseCarOutput" name="baseCarOutput"
                       class="form-control" value="1" aria-required="true"
                       aria-invalid="true" readonly="readonly"
                >
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="baseTerminaName" class="col-sm-3 control-label">设备编号：</label>
            <div class="col-sm-8">
                <input id="baseTerminaName" name="baseTerminaName"
                       class="form-control"  type="text"
                       aria-required="true" aria-invalid="true" readonly="readonly">
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="baseTerminalSim" class="col-sm-3 control-label">SIM：</label>
            <div class="col-sm-8">
                <input id="baseTerminalSim" name="baseTerminalSim"
                       class="form-control"  type="text"
                       aria-required="true" aria-invalid="true" readonly="readonly">
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="userName" class="col-sm-3 control-label">车主姓名：</label>
            <div class="col-sm-8">
                <input id="userName" name="userName" class="form-control"
                      type="text" aria-required="true"
                       aria-invalid="true" readonly="readonly">
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="userPhone" class="col-sm-3 control-label">车主电话：</label>
            <div class="col-sm-8">
                <input id="userPhone" name="userPhone" class="form-control"
                        type="text" aria-required="true"
                       aria-invalid="true" readonly="readonly">
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="baseCarName" class="col-sm-3 control-label">车辆别名：</label>
            <div class="col-sm-8">
                <input id="baseCarName" name="baseCarName"
                       class="form-control"
                        type="text" aria-required="true"
                       aria-invalid="true" readonly="readonly">
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="baseCarFdNo" class="col-sm-3 control-label">发动机号：</label>
            <div class="col-sm-8">
                <input id="baseCarFdNo" name="baseCarFdNo"
                       class="form-control"
                       type="text" aria-required="true"
                       aria-invalid="true" readonly="readonly">
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="baseCarJjNo" class="col-sm-3 control-label">机架号：</label>
            <div class="col-sm-8">
                <input id="baseCarJjNo" name="baseCarJjNo"
                       class="form-control"
                        type="text" aria-required="true"
                       aria-invalid="true" readonly="readonly">
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="baseCarRlType" class="col-sm-3 control-label">燃料类型：</label>
            <div class="col-sm-8">
                <input id="baseCarRlType" name="baseCarRlType"
                       class="form-control"
                       type="text"
                       aria-required="true" aria-invalid="true"  readonly="readonly">
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="baseCarOfProvince" class="col-sm-3 control-label">所属省份：</label>
            <div class="col-sm-8">
                <input id="baseCarOfProvince" name="baseCarOfProvince"
                       class="form-control"  type="text"
                       aria-required="true" aria-invalid="true" readonly="readonly">
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="baseCarOfCity" class="col-sm-3 control-label">所属市区：</label>
            <div class="col-sm-8">
                <input id="baseCarOfCity" name="baseCarOfCity"
                       class="form-control"
                        type="text" aria-required="true"
                       aria-invalid="true" readonly="readonly">
            </div>
        </div>
        <div class="form-group" id="isHiddenDiv">
            <label for="baseCarDis" class="col-sm-3 control-label">初始里程：</label>
            <div class="col-sm-8">
                <input id="baseCarDis" name="baseCarDis"
                       class="form-control"
                        type="text" aria-required="true"
                       aria-invalid="true"
                       number="true" maxlength="10" readonly="readonly">
            </div>
        </div>
    </form>
</div>
<%-include ../taglibs/layout.js.ejs%>
<script type="text/javascript" src="js/viewpage/monitor.js"></script>
<script type="text/javascript">
    $(function () {
        $("#myMapParent").css({"height":$(window).height()-48-20 + "px"});
        $("#bottom-box").css({"width":$(window).width()-240 + "px"});
        $(".arrowLeft").on("click",function () {
            $(this).hide();
            $("#left-tree").hide(300);
            $(".arrowRight").show();
        });
        $(".arrowRight").on("click",function () {
            $(this).hide();
            $("#left-tree").show(300);
            $(".arrowLeft").show();
        });
    })
</script>
</body>
</html>